<template>
    <div class="login_container">
        <div class="login_box">
            <h1>找回密码</h1>
            <!-- 登录表单 -->
            <el-form class="login_form" :rules="UpdateFormRules" :model="UpdateForm" ref="UpdateFormRef">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input class="login_input" v-model="UpdateForm.username"  placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <!-- 邮箱 -->
                <el-form-item prop="email">
                    <el-input class="login_input" v-model="UpdateForm.email"  placeholder="邮箱" prefix-icon="el-icon-message"></el-input>
                </el-form-item>

                <el-form-item class="btns">
                    <el-button type="primary" @click="SubmitUpdate">提交</el-button>
                    <el-button type="info" @click="resetUpdateForm">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
        <!-- 注册弹窗 -->
        <el-dialog :visible.sync="RegDialog" width="20%" center>
            <!-- 注册子组件 -->
            <UpdatePassWord :UpdateForm='UpdateForm' />
        </el-dialog>
    </div>
</template>

<script>
import { send_email_code_post } from './axios_api/api.js'
import UpdatePassWord from './subunit/UpdatePassWord'
export default {
    components: {
        UpdatePassWord,
    },
    data() {
        return {
            UpdateForm: {
                username: '',
                email: ''
            },
            // 这是表单的验证规则对象
            UpdateFormRules: {
                // 验证用户是否合法
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { pattern: /^[a-zA-Z]([a-zA-Z0-9]){5,16}$/, message: '用户名以字母开头,且长度在 6 到 16 个字符' },
                ],
                // 验证邮箱是否合法
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { pattern: /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/, message: '邮箱格式不正确' },
                ],
            },
            // 注册弹窗
            RegDialog: false,
            // 邮箱验证码
            code: '',
        }
    },
    mounted() {
    },
    methods: {
        // 重置事件
        resetUpdateForm() {
            // 绑定的from表单的ref属性，resetFields是element里面的事件
            this.$refs.UpdateFormRef.resetFields();
        },
        SubmitUpdate() {
            // 验证信息是否成功
            this.$refs.UpdateFormRef.validate(valid => {
                if (!valid) return;
                send_email_code_post(this.UpdateForm).then(resp => {
                    if (resp.code === 200) {
                        this.$message.success(resp.message)
                        this.RegDialog = true;
                    } else {
                        this.$message.error(resp.message)
                    }

                })
            })
        },
    }
}
</script>

<style>
</style>